<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>
			AA
		<p>BB</p>
		CC
		</p>
		<!-- 所有的输入元素都必须放在 form 中才能同步提交 -->
		<form action="/v1/user/login.php" method="get">
			<!-- disabled: 是否禁用，禁用的输入域不会提交 -->
			<!-- readonly: 是否只读，只读的输入域可以提交 -->
			<!-- 提示：HTML所有的属性中，“是否....”类型的属性只要出现，就表示true -->
			用户名：<input type="text" name="userName1" disabled value="tom"> <br>
			用户名：<input type="text" name="userName2" readonly value="mary"> <br>
			<input type="hidden" name="userId" value="1234">
			<!-- 提交按钮 -->
			<!-- 属性disabled： 是否禁用按钮，true/false -->
			<input type="submit" value="用户登录" disabled="true">
			<input type="submit" value="用户登录" disabled="false">
			<input type="submit" value="用户登录" disabled="">
			<input type="submit" value="用户登录" disabled>
			<!-- 重置按钮，清空所有的用户输入 -->
			<input type="reset" value="清空重填">
			<!-- 普通按钮，它的功能必须配合JS才能实现 -->
			<input type="button" value="退出">
			<!-- 图片按钮，用于提交当前表单的输入(功能与submit一样) -->
			<input type="image" src="./img/cart.png" width="100">
		</form>

		<form action="/v1/login" method="get">
			<!-- label: 便签、标签 -->
			<label for="yonghuming">用户名：</label>
			<input id="yonghuming" type="text" name="uname"> <br>

			<!-- 单选按钮 -->
			<!-- 属性：checked，是否被勾选 -->
			政治面貌：
			<input type="radio" name="zzmm" value="dy"> 党员
			<input type="radio" name="zzmm" value="ty"> 团员
			<input type="radio" name="zzmm" value="qz" checked> 群众 <br>

			<!-- 多选按钮/复选框 -->
			您的兴趣爱好：
			<input type="checkbox" name="aihao" value="xy"> 洗衣
			<input type="checkbox" name="aihao" value="zf" checked> 做饭
			<input type="checkbox" name="aihao" value="sd" checked> 扫地 <br>

			<!-- 下拉菜单 -->
			<!-- select：选取 -->
			<!-- option：选项 -->
			<!-- 属性：selected，是否被选中 -->
			您的籍贯：
			<select name="jiguan">
				<option value="hb">河北省</option>
				<option value="bj">北京市</option>
				<option value="zj" selected>浙江省</option>
				<option value="yn">云南省</option>
				<option value="cq">重庆市</option>
			</select> <br>
			<!-- 属性：size，面积、大小，此处指显示出来的选项个数 -->
			<!-- 属性：multiple，是否允许多选 -->
			您想要的菜品：
			<select name="cai" size="4" multiple>
				<option value="hsr">红烧肉</option>
				<option value="jhj">叫花鸡</option>
				<option value="hmj">黄焖鸡</option>
				<option value="ksj">口水鸡</option>
				<option value="jmj">椒麻鸡</option>
			</select> <br>
			<!-- 文件上传域 -->
			您的简历：
			<input type="file" name="jianli"> <br>
			<!-- HTML5新增的表单输入元素 -->
			<!-- datetime-local：当地的日期时间格式 -->
			您的生日：<input type="date"> <br>
			早上上班时间：<input type="time"> <br>
			本蛋糕制作时间：<input type="datetime-local"> <br>
			梅雨所在月份：<input type="month"> <br>
			轮胎生产所在周：<input type="week"> <br>
			<hr>
			您的幸运色：<input type="color"> <br>
			<!-- range：范围 -->
			适合工作的年龄：<input type="range"> <br>
			<!-- step：步长 -->
			您的年龄：<input type="number" min="10" max="30" step="2"> <br>
			您的邮箱：<input type="email"> <br>
			您的主页：<input type="url"> <br>
			<!-- 电话类型在PC浏览器中与text一样，手机中不一样 -->
			您的电话：<input type="tel"> <br>
			<!-- search：搜索 -->
			产品搜索：<input type="search"> <br>
			<br>
			<input type="submit">
		</form>

		<!-- 在一个网页中嵌入其它的网页 -->
		<!-- iframe： inner frame，内部窗体 -->
		<h1>今天学的第一个网页</h1>
		<iframe src="./day01.html" width="300" height="100"></iframe>
		<h1>今天学的第二个网页</h1>
		<iframe src="./day02.html" width="300" height="100"></iframe>
		<h1>嵌入当前服务器外部的网页</h1>
		<iframe src="//tmooc.cn" width="300" height="100"></iframe>

		<!-- H5中提供了一批语义标签描述页面中的一块内容 -->
		<!-- header：头部 -->
		<!-- nav：导航 -->
		<!-- section：部分 -->
		<!-- aside：侧边 -->
		<!-- footer：尾部 -->
		<!-- article：文章 -->
		<header>页头</header>
		<nav>导航</nav>
		<section>
			主信息
			<article>第一篇文章的内容...</article>
			<article>第二篇帖子的内容...</article>
		</section>
		<aside>边栏</aside>
		<footer>页脚</footer>
		<!-- 传统的网页中使用 div 描述页面中的一块内容 -->
		<div class="ye-tou">页头</div>
		<div class="dao-hang">导航</div>
		<div class="zhu-xin-xi">主信息</div>
		<div class="bian-lan">边栏</div>
		<div class="ye-jiao">页脚</div>

		<h3>注册新用户</h3>
		用户名：<input type="text" id="uname">
		<!-- script：脚本/剧本，在页面中嵌入一段JavaScript代码 -->
		<script>
			//为输入框的“失去焦点”事件指定处理方法
			uname.onblur = function() {
				//获得用户在输入框中的输入值
				var n = uname.value
				//拼接服务器端接口地址
				var url = 'http://www.codeboy.com:9999/data/user/check_uname.php?uname=' + n

				/*********使用AJAX技术访问服务器端接口***********/
				//第一步：创建一个可以发起请求的工具对象
				var req = new XMLHttpRequest()
				//第二步：打开到服务器的连接
				req.open('get', url)
				//第三步：向服务器发起请求
				req.send()
				//第四步：处理服务器返回的响应数据——响应数据加载完成时读取数据
				req.onload = function() {
					//响应消息中的文本数据
					console.log(req.responseText) 
				}
			}
		</script>
	</body>
</html>
